<style>
	article { width: 100%;  }
	article.gymSelect { height: 28px; }
	label.gymName { font-size: 20px; font-weight: bolder; color: #333; }
	input[name=gymName] { width: 500px; height: 32px; border-style: inset;  }
	button#btn_gymName { width: 60px; height: 32px; background-color: dodgerblue; border-radius: 5px; color: white; text-shadow: -1px -1px 1px #333; }
	.gymTitle span:nth-child(1) { font-size: 32px; font-weight: bolder; color: dodgerblue; text-shadow: 1px 1px 3px #333;  }
	.gymTitle span:nth-child(2) { font-size: 24px; font-weight: bolder; color: dodgerblue; margin-left: 20px; }


	article.charts { margin-top: 40px; }
	.chart { width: 100%; height: 400px; border: 1px solid lightgrey; margin-top: 10px; }
	.chart_title { width: 100%; font-size: 28px; font-weight: bold; text-align: center; margin-top: 20px; }	
</style>

<article class="gymSelect" id="vm">
	<label class="gymName">地区或门店：</label>
	<input name="gymName" placeholder="请选择城市或门店，再次点击显示全部列表"  list="gymName">
	<datalist id="gymName"></datalist>
	<button id="btn_gymName">查询</button>
	
</article>

<article class="charts ">
	<div class="gymTitle"><span class="gymName"></span><span class=""></span></div>

	<div class="chart_title">续课健康贡献占比</div>
	<div class="chart" id="income_xk_rate"></div>

	<div class="chart_title">体验课与新增健康贡献</div>
	<div class="chart" id="ty_income"></div>

	<div class="chart_title">活跃度、上课人次与续课健康贡献</div>
	<div class="chart" id="av_times_xk"></div>
	
</article>

<script>

var option_xk_rate = $.extend(true, {}, option_bar_line, {
    legend: {data: ['新增健康贡献', '续课健康贡献', '续课健康项献占比']},
    series: [{ name: '新增健康贡献', stack:'a', itemStyle: { normal: {barBorderRadius: [0, 0, 0, 0]}}, label:{normal:{color: 'darkorange', position: 'inside'}}},
    	{ name: '续课健康贡献', stack: 'a', barCategoryGap: '60%'},
    	{ name: '续课健康项献占比'}]	
});
// console.log(option_xk_rate)

var option_ty_income = $.extend(true, {}, option_bar_line, {
    legend: {data: ['体验课', '新增健康贡献', '总健康贡献']},
    series: [{ name: '新增健康贡献'}, { name: '总健康贡献'}, { name: '体验课'}]    
});

var option_av_times_xk = $.extend(true, {}, option_bar_line, {
    yAxis: [ {type: 'value'}, {type: 'value', offset: 40}, {type: 'value', max: 100}],
    legend: {data: ['活跃度', '上课人次', '续课健康贡献']},
    series: [{ name: '活跃度', type: 'line', yAxisIndex: 2}, { name: '上课人次', type: 'line'}, { name: '续课健康贡献'}]   
});


$(function(){

    $("datalist#gymName").append("<option value='全国'>");
    $.get(dataDomain + "curd.php", {table: "gym", do: "select", fields: "distinct city", conditions: JSON.stringify({status: 1})}, function(r){
        console.log(r)
        var s = r;
        for(var i in s){
            var x = s[i];
            var op = $("<option>")
            op.val(x.city);
            $("datalist#gymName").append(op);
        }
        $("input[name=gymName]").val("全国");
        $("button#btn_gymName").click();
        $.get(dataDomain +　"curd.php", {table: "gym", do: "select", fields: "name", conditions: JSON.stringify({status: 1})}, function(r){
            // console.log(r)
            var s = r;
            for(var i in s){
                var x = s[i];
                var op = $("<option>")
                op.val(x.name);
                $("datalist#gymName").append(op);
            }
        }, 'json')
    }, 'json')  

	// 点击查询按钮后，获取数据，显示所有图表
    $("button#btn_gymName").click(function(){
        var gymName = $("input[name=gymName]").val();
        if(! gymName){
            alert ("请选择门店！");
            return ;
        }
        $("article.charts").show();

        $.get(dataDomain + "getData.php", {do: 'getIncomes', gymName: $("input[name=gymName]").val()}, function(r){
            // console.log(r);
            // 图2，先创建一个空的数据结构模型
            var k = {xAxis:[{data:[]}], series:[{data:[]}, {data:[]}, {data:[]}]};
            option_xk_rate.xAxis[0].data = [];
            option_xk_rate.series[0].data = [];
            option_xk_rate.series[1].data = [];
            option_xk_rate.series[2].data = [];
            
            for(var i in r){
                var x = r[i];
                k.xAxis[0].data[i] = x.mon;
                k.series[0].data[i] = Number(x.zh_fee);
                k.series[1].data[i] = Number(x.xk_fee);
                k.series[2].data[i] = Number(x.total_fee) ? (Number(x.xk_fee) / Number(x.total_fee) * 100).toFixed(2) : 0;
			}
            // 再把数据拼进option
            $.extend(true, option_xk_rate, k);

            option_xk_rate.dataZoom[0].startValue = i - 12;
            option_xk_rate.dataZoom[0].endValue = i - 2;
            var chart_xk_rate = echarts.init(document.getElementById('income_xk_rate'));
            chart_xk_rate.setOption(option_xk_rate);
            

            // 图3，先创建一个空的数据结构模型
            var k = {xAxis:[{data:[]}], series:[{data:[]}, {data:[]}, {data:[]}]};
            option_ty_income.xAxis[0].data = [];
            option_ty_income.series[0].data = [];
            option_ty_income.series[1].data = [];
            option_ty_income.series[2].data = [];
            for(var i in r){
                var x = r[i];
                k.xAxis[0].data[i] = x.mon;
                k.series[0].data[i] = Number(x.zh_fee);
                k.series[1].data[i] = Number(x.total_fee);
                k.series[2].data[i] = 10;
            }
            // 再把数据拼进option
            $.extend(true, option_ty_income, k);

            option_ty_income.dataZoom[0].startValue = i - 12;
            option_ty_income.dataZoom[0].endValue = i - 2;
            var chart_ty_income= echarts.init(document.getElementById('ty_income'));
            // chart_ty_income.setOption(option_ty_income);


            // 图4，先创建一个空的数据结构模型
            var k = {xAxis:[{data:[]}], series:[{data:[]}, {data:[]}, {data:[]}]};
            option_av_times_xk.xAxis[0].data = [];
            option_av_times_xk.series[0].data = [];
            option_av_times_xk.series[1].data = [];
            option_av_times_xk.series[2].data = [];
            for(var i in r){
                var x = r[i];
                k.xAxis[0].data[i] = x.mon;
                k.series[0].data[i] = 0
                k.series[1].data[i] = 0
                k.series[2].data[i] = Number(x.xk_fee);
            }
            // 再把数据拼进option
            $.extend(true, option_av_times_xk, k);

            option_av_times_xk.dataZoom[0].startValue = i - 12;
            option_av_times_xk.dataZoom[0].endValue = i - 2;
            var chart_av_times_xk= echarts.init(document.getElementById('av_times_xk'));

            // 为option补充数据，需要异步获取另一组数据
            $.get(dataDomain + 'getData.php', {do: 'getGymMonths', gymName: $("input[name=gymName]").val()}, function(r2){
                // console.log(r2);
                for(var j in r2){
                    for(var i in r){
                        if(r2[j].mon == r[i].mon){
                            var total_users = Number(r2[j].usersCount) + Number(r2[j].newUsersCount);
                            // console.log(total_users);
                            // console.log(Number(r2[j].classesUsersCount))
                            option_av_times_xk.series[0].data[i] = total_users && Number(r2[j].classesUsersCount) ? (Number(r2[j].classesUsersCount) / total_users * 100).toFixed(2) : 0;
                            // console.log(option_av_times_xk.series[0].data[i])
                            option_av_times_xk.series[1].data[i] = Number(r2[j].classesCount);
                            option_ty_income.series[2].data[i] = Number(r2[j].ty_classesCount);
                        }
                    }
                }
                chart_ty_income.setOption(option_ty_income);
                chart_av_times_xk.setOption(option_av_times_xk);
            }, 'json');
            
            // 将3个图的X轴控制绑定，同步缩放
            echarts.connect([chart_xk_rate, chart_ty_income, chart_av_times_xk]);

        }, 'json')


    })

    $("input[name=gymName]").click(function(){
        $(this).val("")
    })
	
})    
</script>